<template>
  <div class="title-wrapper">
    <div class="title-indicator"></div>
    <h2 class="title-text">{{ title }}</h2>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

// 定义组件接收的属性，用于传递标题文本
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
});
</script>

<style scoped>
.title-wrapper {
  display: flex;
  align-items: center;
}

.title-indicator {
  width: 6px;
  height: 20px;
  background-color: #ffd400; /* 黄色指示器，可根据需要修改颜色 */
  margin-right: 8px;
}

.title-text {
  font-size: 18px;
  font-weight: bold;
  color: #333; /* 标题文字颜色，可根据需要修改 */
  margin: 0;
}
</style>
